<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" class="fonts">
      <el-breadcrumb-item :to="{ path: '/contentmanagement' }"
        >内容管理</el-breadcrumb-item
      >
      <el-breadcrumb-item>汽车品牌</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>
      <el-button type="primary" @click="addbtn">+ 添加汽车品牌</el-button>

    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="编号" width="180" align="center">
      </el-table-column>
      <el-table-column prop="name" label="汽车品牌" width="180" align="center">
      </el-table-column>
      <el-table-column></el-table-column>
    </el-table>
    <div class="block" align="center">
      <el-pagination
        @current-change="handleCurrentChange"
        :page-size="pageSize"
        layout="total, prev, pager, next, jumper"
        :total="count"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      count: 0,
      pageSize: 10,
      data: {
        limit: this.pageSize,
        page: 1,
      },
    };
  },
  methods: {
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      let data = this.data;
      data.page = val;
      this.pagep(data);
    },

    pagep() {
      //查询到所有数据渲染表格
      this.$axios({
        url: "/carBrand/list",
        method: "POST",
        data: this.data,
      }).then((res) => {
        console.log(res);
        if (res.data.code === 0) {
          this.tableData = res.data.data;
          this.count = res.data.count;
          console.log(this.count);
        }
      });
    },

    addbtn() {
      this.$router.push("/car");
    },
  },

  mounted() {
    this.pagep();
  },
};
</script>

<style>
a {
  text-decoration: none;
  color: white;
}
.fonts {
  font-size: 20px;
}
</style>
